define(["./CaseItemView"], function (CaseItemView) {
  return Backbone.View.extend({
    className: "",
    template: _.template($("#tpl-fly-case-list").html()),
    events: {
      "click footer button": "create",
      "click input": "filter",
      "keyup input": "filter",
    },

    initialize: function () {
      this.model.bind("reset", this.renderAll, this);
      this.model.bind("add", this.add, this);
      this.model.fetch();
      this.render();
    },

    // 渲染列表
    render: function () {
      this.renderAll();
      return this;
    },

    renderAll: function () {
      $(".fly-case-list").empty();
      this.model.each(this.renderOne, this);
    },

    renderOne: function (caseItem) {
      var view = new CaseItemView({
        model: caseItem,
      });
      var el = view.render().$el;
      $(".fly-case-list").append(el.children());
      view.setElement($('.fly-case-list [data-id="' + caseItem.id + '"]'));
    },

    add: function (caseItem) {
      this.renderOne(caseItem);
    },
  });
});
